<template>
  <div :class="['text_box',state.is_in && Number(state.index)>=0 ?'slide-in-bottom':'slide-out-bottom']" >
    <img src="/public/images/text_bg.png" alt="" class="text_bg">
   {{ state.text_list[state.index]?.text_1 ||'蓝鲸NE1.5T混动专用发动机' }} <br> {{ state.text_list[state.index]?.text_2 || '动力快人一步' }}
  </div>
</template>

<script setup>
import {onMounted,reactive,watch} from "vue"

const props = defineProps({
    index:{
        type:Number,
        default:0
    },
    isShow:{
        type:Boolean,
        default:false
    }
})
const state = reactive({
    is_in:props.isShow,
    index:props.index,
    text_list:[
        {
            text_1: "UNI-V智电iDD,无边界格栅，", 
            text_2:"引领未来之美",
        },
        {
            text_1: "UNI-V智电iDD，隐藏式智慧迎宾门把手", 
            text_2:"精致隐于细节",
        },
        {
            text_1: "UNI-V智电iDD，蓝鲸NE1.5T", 
            text_2:"混动专用发动机，动力快人一步",
        },
        {
            text_1: "UNI-V智电iDD，蓝鲸六速电驱变速箱", 
            text_2:"全速域强劲输出",
        },
        {
            text_1: "UNI-V智电iDD，高聚能PHEV电池", 
            text_2:"省钱更省心",
        },
        {
            text_1: " UNI-K智电iDD，交/直流双快充", 
            text_2:"极效充能，轻松补电",
        },
        {
            text_1: "UNI-K智电iDD，全场景驾驶模式", 
            text_2:"可油可电，随心选择",
        },
        {
            text_1: "UNI-K智电iDD，全场景智慧语音交互", 
            text_2:"人车沟通，趣意无限",
        },
        {
            text_1: "UNI-K智电iDD，主动智能安全体系", 
            text_2:"眼观六路，防患未然",
        },
        {
            text_1: " UNI-K智电iDD，360°高清全景影像", 
            text_2:"+透明底盘，给你满分安全感",
        },
    ]
})
watch(props,(newVal,oldVal)=>{
    console.log("newVal",newVal)
    console.log("oldVal",oldVal)
    state.is_in = newVal.isShow;
    state.index = newVal.index== 0 ? newVal.index : newVal.index - 1;
    
    if(newVal.isShow){
        setTimeout(()=>{
        state.is_in = false
      },2500)
    }

})
const emit = defineEmits(["handleClose"])
onMounted(()=>{
  randomText()
})

function randomText (){
    let  arr = state.text_list;
    let cloneArr = arr.concat()
    var len = cloneArr.length;
    for(var i=0;i<len;i++){
      var index = Math.floor(Math.random()*cloneArr.length)
      var temp = cloneArr[index];
      cloneArr[index] = cloneArr[i]
      cloneArr[i] = temp
    }
    console.log(cloneArr)
    state.text_list = cloneArr
}

defineExpose({
  randomText,
});

</script>
<style  scoped>
    .text_box{
        width: 669px;   
        height: 158px;
        position: absolute;
        bottom: 100px;
        left: 0;
        right: 0;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-family: "ChangAnunitype-Regular";
        color: #0f5ba8;
        box-sizing: border-box;
        padding: 20px 20px;
        font-size: 30px;
        pointer-events: none
    }
    .text_bg{
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
        
    }



    .slide-in-bottom {
	-webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.slide-out-bottom {
	-webkit-animation: slide-out-bottom 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: slide-out-bottom 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2023-5-10 11:40:37
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */
 @-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2023-5-10 11:41:9
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-out-bottom
 * ----------------------------------------
 */
 @-webkit-keyframes slide-out-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
}
@keyframes slide-out-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
}


</style>